<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  <title></title>
  <style>
	*{
		margin: 0;
		padding: 0;
	}
	p{
		color: red;
	}
	#p2{
		color: green;
	}
	.mark{
		background-color: yellow;
	}
	.product{
		text-decoration: underline;
	}
	/*p.mark{
		border: 1px solid purple;
	}*/
	/*div span{
		border: 1px solid purple;
	}*/
	div > span{
		border: 1px solid purple;
	}
	div .mark{
	
	}
	.product.mark{
	}
  </style>
 </head>

 <body>
  <h2>二号标题</h2>
  <p>一段文字</p>
  <p id="p2">一段文字</p>
  <p class="mark">三段文字</p>
  <span class="mark product">一个内联元素</span>
  <hr/>
  
  <div>
	四段文字
	<span>DIV中的SPAN</span>
	<p>DIV中的P<span>DIV中的P中的SPAN</span></p>
	<b>DIV中的P
		<i><span>DIV中的P中的SPAN</span></i></b>
  </div>


	<div>
		<span>第一个孩子</span>
		<b><span>第一个孩子</span></b>
		<span>第一个孩子</span>
	</div>
	<p>
	</p>
 </body>
</html>
